{% load static %}
<!doctype html>
<html class="no-js" lang="zxx">
<head>
	<meta charset="utf-8">
	<title>统计图表</title>
	<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/icon/favicon.png' %}">

	<!-- CSS here -->
	<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

	<link rel="stylesheet" href="{% static 'css/style.css' %}">

    <script src="{% static 'js/echarts.min.js' %}"></script>
</head>
<body>
	<header>
		<div class="header-area header-transparent">
			<div class="main-header header-sticky">
				<div class="container-fluid">
					<div class="menu-wrapper d-flex align-items-center justify-content-between">
						<div class="left-content d-flex align-items-center">
							<div class="logo">
								<a href="{% url 'index' %}"><img src="{% static 'images/logo/logo-test.png' %}" alt=""></a>
							</div>

							<!-- Main-menu -->
							<div class="main-menu d-none d-lg-block">
                                <nav>
                                    <ul id="navigation">
                                        <li><a href="{% url 'index' %}">主页</a></li>
                                        <li><a>列表<i class="fas fa-angle-down"></i></a>
                                            <ul class="submenu">
                                                <li><a href="{% url 'funds' %}">基金列表</a></li>
                                                <li><a href="{% url 'users' %}">用户列表</a></li>
                                            </ul>
                                        </li>
                                        <!--
                                        <li><a href="about.html">用户列表</a></li>
                                        <li><a href="#">Blog</a>
                                            <ul class="submenu">
                                                <li><a href="blog.html">用户列表</a></li>
                                                <li><a href="blog_details.html">Blog Details</a></li>
                                                <li><a href="elements.html">Element</a></li>
                                            </ul>
                                        </li>
                                        -->
                                        <li><a href="{% url 'chart' %}">统计图表</a></li>
                                    </ul>
                                </nav>
                            </div>
						</div>
						<!-- Button -->
						<div class="buttons">
							<ul>
								<li class="button-header">
									<form action="{% url 'logout' %}">
                                        <input type="submit" value="退出登录" class="btn header-btn2">
                                    </form>
								</li>
							</ul>
						</div>
					</div>
					<!-- Mobile Menu -->
					<div class="col-12">
						<div class="mobile_menu d-block d-lg-none"></div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<main>
		<!-- Hero area Start-->
		<div class="slider-area">
			<div class="slider-height2 hero-bg2 hero-overly d-flex align-items-center">
				<div class="container">
					<div class="row">
						<div class="col-xl-12">
							<div class="hero-caption hero-caption2">
								<h2>统计图表</h2>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--  Hero area End -->
        <div id="chart1" style="margin: 10px;width: 30%;height: 300px;float: left">

        </div>

        <div id="chart2" style="margin: 10px;width: 35%;height: 300px;float: left">
            aa
        </div>
        <div id="chart3" style="margin: 10px;width: 30%;height: 300px;float: left">
            aa
        </div>

	</main>

    <script>
        var chartDom = document.getElementById('chart1');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                        text: '用户关注基金占比'
                    },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:{{ follow.2 }}, name:'混合型'},
                        {value:{{ follow.3 }}, name:'债券型'},
                        {value:{{ follow.1 }}, name:'股票型'},
                        {value:{{ follow.4 }}, name:'指数型'},
                        {value:{{ follow.5 }}, name:'货币型'}
                    ]
                }
            ],

            backgroundColor: '#f0f0f4'
        };

        option && myChart.setOption(option);
    </script>

<script>
        var chartDom = document.getElementById('chart2');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                        text: '用户购买基金占比'
                    },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    data:[
                        {value:{{ hold.2 }}, name:'混合型'},
                        {value:{{ hold.3 }}, name:'债券型'},
                        {value:{{ hold.1 }}, name:'股票型'},
                        {value:{{ hold.4 }}, name:'指数型'},
                        {value:{{ hold.5 }}, name:'货币型'}
                    ]
                }
            ],

            backgroundColor: '#f0f0f4'
        };

        option && myChart.setOption(option);
    </script>

<script>
        var chartDom = document.getElementById('chart3');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: '基金涨幅'
            },
            tooltip: {},
            legend: {
                data:['涨幅']
            },
            xAxis: {
                data: ["股票型", "货币型", "债券型", "指数型", "混合型"]
            },
            yAxis: {},
            series: [{
                name: '涨幅',
                type: 'bar',
                data: [{{ increase.1 }}, {{ increase.5 }}, {{ increase.3 }}, {{ increase.4 }}, {{ increase.2 }}]
            }],
            backgroundColor: '#f0f0f4'
        };

        option && myChart.setOption(option);
    </script>



</body>
</html>